{% extends 'layout/manage.html' %}
{% block title %}
    Tracer-文件
{% endblock %}
{% block css %}
    <style>
        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-default > .panel-heading a {
            text-decoration: none;
        }

        .panel-default > .panel-heading span {
            padding: 0 5px;
        }

        .panel-default > .panel-heading .function .upload {
            overflow: hidden;
        }

        .panel-default > .panel-heading .function .upload input {
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }

        .upload-progress {
            position: fixed;
            right: 2px;
            bottom: 2px;
            width: 400px;
        }

        .upload-progress .progress-error {
            color: red;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default" style="margin-top: 20px">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <div>
                    <a href="{% url 'app:file' id=request.tracer.project.id %}">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span>文件库</span>
                    </a>
                    {% for folder_item in folder_ls %}
                        <a href="{% url 'app:file' id=request.tracer.project.id %}?folder={{ folder_item.id }}">
                            <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                            <i class="fa fa-folder-open" aria-hidden="true"></i>
                            <span>{{ folder_item.name }}</span>
                        </a>
                    {% endfor %}
                </div>
                <div>
                    <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addFolder"
                       data-whatever="新建文件夹">
                        <i class="fa fa-plus-circle" aria-hidden="true">新建文件夹</i>
                    </a>
                </div>
            </div>

            <!-- Table -->
            <table class="table">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>大小</th>
                    <th>更新者</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for file in file_list %}
                    <tr>
                        <th scope="row">
                            {% if file.file_type == 2 %}
                                <i class="fa fa-folder" aria-hidden="true"></i>
                            {% else %}
                                <i class="fa fa-file" aria-hidden="true"></i>
                            {% endif %}
                            <a href="{% url 'app:file' id=request.tracer.project.id %}?folder={{ file.id }}">{{ file.name }}</a>
                        </th>
                        <td>{% if file.file_type == 2 %}-{% else %}{{ file.file_size }}{% endif %}</td>
                        <td>{{ file.update_user.username }}</td>
                        <td>{{ file.update_datetime | date:'Y-m-d H:i:s' }}</td>
                        <td>
                            {% if file.file_type == 2 %}
                                <a class="btn btn-default btn-xs"
                                   data-toggle="modal"
                                   data-target="#addFolder"
                                   data-name="{{ file.name }}"
                                   data-fid="{{ file.id }}"
                                   data-whatever="修改文件夹">
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                </a>
                            {% endif %}
                            <a class="btn btn-default btn-xs">
                                <i class="fa fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="addFolder" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <form id="form">
                        {% csrf_token %}
                        <input class="hide" type="text" name="fid" id="fid">
                        {% for field in form %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}:</label>
                                {{ field }}
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" class="btn btn-primary" id="formSubbmit">提 交</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        var BASE_URL = "{% url 'app:file' id=request.tracer.project.id %}";
        $(function () {
            initModal();
            uploadForm();
        })

        function initModal() {
            $('#addFolder').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var recipient = button.data('whatever') // Extract info from data-* attributes
                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var name = button.data('name'); // Extract info from data-* attributes
                var fid = button.data('fid'); // Extract info from data-* attributes
                var modal = $(this)
                modal.find('.modal-title').text(recipient);
                if (fid) {
                    // 编辑
                    console.log(name)
                    modal.find('#id_name').val(name);
                    modal.find('#fid').val(fid);
                } else {
                    // 新建
                    modal.find('.error-msg').empty();
                    $('#form')[0].reset();
                }
                //$('#form')[0].reset()
            })
        }

        function uploadForm() {
            $('#formSubbmit').click(function () {
                $.ajax({
                    url: location.href,
                    type: "POST",
                    data: $('#form').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res['status'] == true) {
                            window.location.reload();
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}